<template>
   <van-collapse v-model="activeNames" accordion @change="collapseChange">
     <van-collapse-item v-for="item in props.leftCollapse" :title="item.name" :name="item.id" :key="item.id" @click="collapgesItemClick(item.children[0].id)">
        <van-sidebar v-model="active">
          <van-sidebar-item v-for="itemChild in item.children" :title="itemChild.name" :key="itemChild.id" @click="tabClick(itemChild.id)"/>
        </van-sidebar>
     </van-collapse-item>
   </van-collapse>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps(['leftCollapse'])
const emit = defineEmits(['sliderClick'])
const activeNames = ref(0) // 手风琴当前项
const active = ref(0) // sliderBar 当前项

// 点击sliderBar
const tabClick = (id: number) => {
  emit('sliderClick', id)
}

// 点击手风琴 切换手风琴的时候 让每一项手风琴下的sliderbar都处于第一个高亮
const collapseChange = () => {
  active.value = 0
}

// 点击手风琴的每一项 都让其立即获取到 当前项下 第一个sliderbar的cid
const collapgesItemClick = (id: number) => {
  emit('sliderClick', id)
}
</script>
